---
title: "Accessibility Checker Rule Help: WCAG20_A_HasText"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

* Blind people using screen readers
* People with low vision using screen magnification

### Why is this important?

When the purpose of a link is clear users can easily navigate links on the page without having to see the surrounding information for context.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### Hyperlink has no description of its purpose
Hyperlinks must have link text, a label or an image with a text alternative

[IBM 2.4.4 Link Purpose (in Context)](https://www.ibm.com/able/guidelines/ci162/link_purpose.html) | [WCAG 2.1 technique H30](https://www.w3.org/TR/WCAG20-TECHS/H30) | [WCAG 2.1 technique ARIA7](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7)

<div id="locSnippet"></div>

### What to do

* Ideally, add unique link text as the content of the hyperlink that describes the purpose of the hyperlink;
* OR If it’s not possible to use unique link text (e.g. multiple ‘Read more..’ links for different topics), use the `aria-labelledby` attribute to point to text visible on the page that identifies the link purpose.  The following example shows how the `aria-labelledby` provides additional context by adding the text 'Breaking News' from the header to the link text 'Read more..':

<CodeSnippet type="multi" light={true}>&lt;h2 id="topic1"&gt;Breaking News&lt;/h2&gt;
&lt;p&gt;The central bank cut interest rates by half a percentage to protect economy.
&lt;a id="p1" href="news.html" aria-labelledby="p1 topic1"&gt;Read more...&lt;/a&gt;&lt;/p&gt;</CodeSnippet>

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)